import React, { Component } from 'react'
import CardContainer from '../component/card.container'

class Rongzixiangqing extends Component {
  constructor(props) {
    super(props)
  }

  getProcessItemList() {
    return [{
      label: '初创企业',
      ratio: 25,
      pend: '106家'
    }, {
      label: '接近规模企业',
      ratio: 15,
      pend: '106家'
    }, {
      label: '规模企业',
      ratio: 35,
      pend: '106家'
    }, {
      label: '挂牌上市企业',
      ratio: 35,
      pend: '106家'
    }, {
      label: '挂牌上市企业',
      ratio: 25,
      pend: '106家'
    }]
  }

  render() {
    let { list1, list2 } = this.props
    return (
      <CardContainer style={{marginRight: 0}}>

        <span className="border-corner border-lt p-left p-top" />
        <span className="border-corner border-rt p-right p-top" />
        <span className="border-corner border-lb p-left p-bottom" />
        <span className="border-corner border-rb p-right p-bottom" />

        <div className="row">
          <div className="process-50">
            <h3>融资详情</h3>
            {list1.map((item, index) => {
              return (
                <div key={index} className="process" style={{ textAlign: 'left' }}>
                  <span className="process-company" style={{ display: 'inline-block', width: '60px', textAlign: 'right' }}>
                    {item.label}
                  </span>
                  <span className="process-bar" style={{ width: item.ratio + '%' }} />
                  <span className="process-pend">{item.pend}</span>
                </div>
              )
            })}
          </div>
          <div className="process-50">
            <h3>活动路演</h3>
            {list2.map((item, index) => {
              return (
                <div key={index} className="process" style={{ textAlign: 'left' }}>
                  <span className="process-company" style={{ display: 'inline-block', width: '60px', textAlign: 'right' }}>
                    {item.label}
                  </span>
                  <span className="process-bar" style={{ width: item.ratio + '%' }} />
                  <span className="process-pend">{item.pend}</span>
                </div>
              )
            })}
          </div>
        </div>
      </CardContainer>
    )
  }
}

Rongzixiangqing.defaultProps = {
  list1: require('../api.mock/rongzixiangqing.json'),
  list2: require('../api.mock/huodongluyan.json')
}

export default Rongzixiangqing